<!-- 首页-场馆 -->
<script setup>
	import {
		reactive,
		ref,
		nextTick,
		watch
	} from 'vue'
	import {
		onLoad,
		onShow,
		onHide,
		onPageScroll,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		useLongLatStore
	} from '@/stores/index'
	import {
		qryShopApi
	} from '@/api/venue.js'
	import {
		getDictTypetApi,
		getCityListtApi
	} from '@/api/public.js'
	// 经纬度
	const longLatStore = useLongLatStore()
	// 全局页面数据
	const data = reactive({
		barHeight: 0,
		navHeight: 0,
		menuButtonHeight: 0,
		menuButtonMargin: 0,
		currentCity: {},
		typeCode: '',
		typeList: [{
			type: '',
			dictLabel: '全部场馆'
		}],
		distanceType: '',
		regionType: '',
		regionList: [],
		distance: '',
		sortType: '1',
		pageNo: 1, // 当前页码
		pageSize: 10, // 每页数量
		totalPages: 10, // 总页数
		status: 'loadmore',
		list: [],
	})



	onLoad(async () => {
		// if (data.typeCode != undefined) {
		asyncTask1();

		//获取手机系统的信息（在这主要是获取状态栏和胶囊的高度）
		let {
			statusBarHeight
		} = uni.getSystemInfoSync()
		data.barHeight = statusBarHeight
		let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
		data.menuButtonHeight = menuButtonInfo.height
		data.menuButtonMargin = menuButtonInfo.top - statusBarHeight
		data.navHeight = menuButtonInfo.height + (menuButtonInfo.top - statusBarHeight) * 2
		data.currentCity = uni.getStorageSync('currentCity') || {}
		init()
	})


	const flag = ref(false)

	async function asyncTask1() {
		return new Promise((resolve, reject) => {
			uni.$on('templateClick', (dictValue) => {
				flag.value = true
				data.typeCode = dictValue

				resolve('hello world')
			});

		});
	}


	async function asyncTask2() {
		return new Promise((resolve, reject) => {
			if (data.typeCode === undefined) {
				data.typeCode = ''
				resolve('hello world')
			}

		});

	}


	// 页面显示时
	onShow(async () => {

		// }   
		// await asyncTask2();
		console.log('onShow: ===');
		// 判断当前城市是否修改
		const cityInfo = uni.getStorageSync('currentCity') || {}
		if (cityInfo.code != data.currentCity.code) {
			data.currentCity = cityInfo

			getList()
		}

		//获取手机系统的信息（在这主要是获取状态栏和胶囊的高度）
		// let {
		// 	statusBarHeight
		// } = uni.getSystemInfoSync()
		// data.barHeight = statusBarHeight
		// let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
		// data.menuButtonHeight = menuButtonInfo.height
		// data.menuButtonMargin = menuButtonInfo.top - statusBarHeight
		// data.navHeight = menuButtonInfo.height + (menuButtonInfo.top - statusBarHeight) * 2
		// data.currentCity = uni.getStorageSync('currentCity') || {}
		// init()

	})



	onHide(() => {
		data.typeCode = ''
	})
	// 初始化
	const init = () => {
		// getList()
		getDictTypList()
		getRegionList()
	}

	// 门店标签字典
	let shopTagList = []
	// 获取数据字典枚举值
	const getDictTypList = () => {
		Promise.all([getDictTypetApi('shop_type'), getDictTypetApi('shop_tag')])
			.then(types => {
				const [shopType, shopTag] = types;
				data.typeList = shopType.data

				shopTagList = shopTag.data
				getList()
			})
	}
	// 获取城市对应区域列表
	const getRegionList = () => {
		getCityListtApi({
			qryType: 2,
			parentId: data.currentCity.code === undefined ? '' : data.currentCity.code
		}).then(res => {

			res.data.city.forEach(region => {
				region.list.forEach(item => {
					data.regionList.push(item)
				})
			})
		})
	}
	// 下拉菜单
	const uDropdownRef = ref(null)
	// 距离类型
	const distanceTypeList = [{
			label: '城区',
			value: 0
		},
		{
			label: '距离',
			value: 1
		}
	]
	// 切换区域
	const regionChange = (item) => {
		data.regionType = item.code
		data.distance = ''
		resetList()
	}

	const distanceChange = (item) => {
		data.distance = item.value
		data.regionType = ''
		resetList()
	}

	// 距离列表
	const distanceList = [{
			label: '附近',
			value: 1
		},
		{
			label: '≤1km',
			value: 2
		},
		{
			label: '≤3km',
			value: 3
		},
		{
			label: '≤10km',
			value: 4
		}
	]

	// 排序查询列表
	const sortList = [{
			label: '默认排序',
			value: 1
		},
		{
			label: '距离优先',
			value: 2
		},
		{
			label: '好评优先',
			value: 3
		},
		{
			label: '价格最低',
			value: 4
		},
		{
			label: '价格最高',
			value: 3
		}
	]
	// 排序类型切换
	const sortTypeChange = (item) => {
		data.sortType = item.value
		resetList()
	}
	// 监听页面滚动到底部
	onReachBottom(() => {
		if (data.status !== 'loadmore') return
		getList()
	})
	// 获取场馆列表
	async function getList() {

		return new Promise((resolve, reject) => {
			console.log('longLatStore:=== ', longLatStore);
			console.log('longLatStore.info: ', longLatStore.info);
			data.status = 'loading';
			qryShopApi({
				pageSize: data.pageSize,
				pageNum: data.pageNo,
				latitude: longLatStore.info.latitude,
				longitude: longLatStore.info.longitude,
				cityCode: data.currentCity.code,
				qryType: 2,
				bizType: data.typeCode
			}).then(res => {
				const list = res.data
				const total = res.total
				// console.log('list', JSON.stringify(list.slice(0, 2)))
				// const { list, total } = res.data
				data.totalPages = Math.ceil(total / data.pageSize)
				data.pageNo === 1 ? data.list = list : data.list = [...data.list, ...list]
				data.pageNo++;
				data.status = data.pageNo >= data.totalPages ? 'nomore' : 'loadmore'
			})
		});

	}
	// 场馆类型切换
	const typeChange = (item) => {
		// console.log(item, 'item');
		data.typeCode = item.dictValue
		resetList()
	}

	// 重置列表
	const resetList = () => {
		uDropdownRef.value.close()
		data.pageNo = 1
		data.list = []
		getList()
	}
	// 前往场馆详情
	const goToDetail = (shopId, shopScore) => {

		uni.navigateTo({
			url: `/subPackage/venue/detail?shopId=${shopId}&shopScore=${shopScore}`

		})
	}
	let dropdownIsOpen = ref(false)
	const dropdownChange = bool => {
		dropdownIsOpen.value = bool
	}


	// 场馆搜索
	const searchClick = () => {
		uni.navigateTo({
			url: '/subPackage/home/search?type=2'
		})
	}
</script>

<template>
	<view class="venue-page">
		<!-- head -->
		<view class="head" :style="{ 'padding-top': data.barHeight + 'px' }">
			<view class="search-box"
				:style="{ 'height': data.menuButtonHeight + 'px', 'margin-top': data.menuButtonMargin + 'px', 'margin-bottom': data.menuButtonMargin + 'px' }"
				@click="searchClick">
				<u-icon name="search" />
				<text class="default-value">FEELINGME·乐刻私教工232312</text>
			</view>
			<view class="screen-box">
				<scroll-view class="type-box" scroll-x enable-flex>
					<view class="item" :class="'' == data.typeCode ? 'active' : ''"
						@click="typeChange({ dictValue: '' })">全部场馆
					</view>
					<view class="item" v-for="item in data.typeList" :key="item.dictValue"
						:class="item.dictValue == data.typeCode ? 'active' : ''" @click="typeChange(item)">
						<text>
							{{ item.dictLabel }}
						</text>
					</view>
				</scroll-view>
				<view class="drop-down-box" :class="!dropdownIsOpen ? 'hide' : ''">
					<up-dropdown ref="uDropdownRef" title-size="24rpx" height="88rpx" active-color="#008043"
						inactive-color="#303133" menu-icon="arrow-down-fill" border-radius="24rpx"
						@open="dropdownChange(true)" @close="dropdownChange(false)">
						<up-dropdown-item title="附近">
							<view class="nearby-box">
								<view class="types-box">
									<view v-for="item in distanceTypeList" :key="item.value" class="item"
										:class="item.value == data.distanceType ? 'active' : ''"
										@click="data.distanceType = item.value">{{
                      item.label }}</view>
								</view>
								<view class="types-content">
									<view v-if="data.distanceType == 0" class="region-box">
										<view v-for="item in data.regionList" class="item" :key="item.code"
											:class="item.code == data.regionType ? 'active' : ''"
											@click="regionChange(item)">{{ item.name
                      }}</view>
									</view>
									<view v-else class="distance-box">
										<view v-for="item in distanceList" :key="item.value" class="item"
											:class="data.distance == item.value ? '  active' : ''"
											@click="distanceChange(item)">
											<text class="label">{{ item.label }}</text>
											<up-icon v-if="data.distance == item.value" name="checkbox-mark"></up-icon>
										</view>
									</view>
								</view>
							</view>
						</up-dropdown-item>
						<up-dropdown-item title="排序">
							<view class="sort-box">
								<view v-for="item in sortList" class="item" :key="item.value"
									:class="item.value == data.sortType ? 'active' : ''" @click="sortTypeChange(item)">
									{{
                    item.label }}
								</view>
							</view>
						</up-dropdown-item>
						<up-dropdown-item title="筛选">
							<view class="screen-box">
								<view class="types-box">
									<view class="item">场地设施</view>
									<view class="item active">设施服务</view>
								</view>
								<view class="types-content">
									<view v-if="true" class="facilities-box">
										<view v-for="item in 8" class="item" :key="item"
											:class="item == 5 ? 'active' : ''">{{ `场地${item}`
                      }}</view>
									</view>
									<view v-else class="service-box">
										<view v-for="item in 2" class="item" :key="item"
											:class="item == 1 ? 'active' : ''">{{ `服务${item}`
                      }}</view>
									</view>
								</view>
								<view class="btns-box">
									<view class="btn reset">重置</view>
									<view class="btn sure">确认</view>
								</view>
							</view>
						</up-dropdown-item>
					</up-dropdown>
				</view>
			</view>
		</view>
		<!-- 内容 -->
		<view class="content">
			<!-- 空状态 -->
			<view v-if="data.list.length <= 0" style="padding-top: 294rpx;">
				<u-empty mode="address" width="150" height="150" textColor="#838385"
					icon="https://image.nanjingtouyang.com/touy/2023/10/2023103113051755879.png"
					text="暂时没有您想要的结果~"></u-empty>
			</view>
			<!-- 场馆列表 -->
			<view v-else class="venue-list">
				<view class="item" v-for="item in data.list" :key="item"
					@click="goToDetail(item.shopId,item.shopScore)">
					<view class="top">
						<view class="logo-box">
							<image :src="item.shopMainPic" style="width: 112rpx;height: 112rpx;" mode="scaleToFill" />
						</view>
						<view class="info">
							<view class="head">
								<text class="name">{{ item.shopName }}</text>
								<view class="distance-box">
									<image src="/static/images/icons/icon_address2.png" mode="scaleToFill" />
									<text class="distance">{{ item.distanceLabel }}</text>
								</view>
							</view>
							<view class="center">
								<view class="rate">
									<!-- 选择半星 -->
									<up-rate v-model="item.shopScore" size="12" :allowHalf="true"
										inactiveIcon="star-fill" inactiveColor="#D9D9D9" activeColor="#FFB13B"
										readonly></up-rate>
									<text>{{ item.shopScore || '暂无评价' }}</text>
									<text style="margin-left: 20rpx;font-size: 20rpx;">{{ item.viewNum || 0 }}人消费</text>
								</view>
								<view class="tags">
									<text v-for="tag in item.tshopTagLabelList" :key="tag" class="card">{{ tag }}</text>
									<text class="tag"
										style="font-size: 20rpx!important;">{{ prodBuyDesc || '暂无预约' }}</text>
								</view>
							</view>
							<!-- 	<view class="consumption-records">
								<text class="tag">{{ prodBuyDesc || '暂无预约' }}</text>
							</view> -->
						</view>
					</view>
					<view v-if="item.shopDetailPic" class="images">
						<view class="item" v-for="(picImg, index) in item.shopDetailPic.split(',')" :key="index"
							:class="'item' + index">
							<image :src="picImg" style="width: 208rpx; height: 188rpx;" mode="scaleToFill" />
							<!-- <iamge :src="pic"  /> -->
						</view>
					</view>
					<view class="bottom">
						<rich-text :nodes="item.shopDesc"></rich-text>
						<!-- <text class="introduce">“{{ item.shopDesc }}”</text> -->
						<view class="price-box">
							<text class="price">￥{{ item.lowPrice }}</text><text class="unit">/次</text>
						</view>
					</view>
				</view>
				<!-- 加载更多 -->
				<up-loadmore :status="data.status" :loading-text="`努力加载中`" :loadmore-text="'加载更多'"
					:nomore-text="'没有更多了'" dashed line />
			</view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.venue-page {
		min-height: 100vh;
		background: #F6F6F6;

		// 顶部
		&>.head {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 1;
			width: 100vw;
			background: #FFFFFF;
			// overflow: hidden;

			// 搜索框
			& .search-box {
				box-sizing: border-box;
				display: flex;
				align-items: center;
				padding: 0rpx 30rpx;
				margin: 12rpx 0;
				margin-left: 32rpx;
				width: 492rpx;
				color: #838385;
				background: #F6F6F6;
				border-radius: 200rpx 200rpx 200rpx 200rpx;

				& .u-icon {
					font-size: 32rpx;
				}

				& text {
					margin-left: 16rpx;
					width: 288rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					line-height: 28rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}

			// 筛选
			& .screen-box {
				margin-top: 28rpx;

				// 类型选择
				& .type-box {
					margin-left: 32rpx;
					white-space: nowrap;

					& .item {
						display: inline-block;
						padding: 8rpx 24rpx;
						margin-right: 8rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #303133;
						line-height: 28rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;

						&.active {
							background: #E7FFE8;
							border-radius: 80rpx 80rpx 80rpx 80rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 28rpx;
							color: #008043;
							line-height: 33rpx;
							text-align: left;
							font-style: normal;
							text-transform: none;
						}
					}
				}

				// 下拉模块
				& .drop-down-box {
					&.hide {
						&::v-deep .u-dropdown {
							& .u-dropdown__content {
								width: 0;
								height: 0;
							}

							& .u-dropdown__content__mask {
								width: 0;
								height: 0;
							}
						}
					}


					// 附近
					& .nearby-box {
						padding-top: 4rpx;
						display: flex;
						min-height: 398rpx;
						background-color: #F6F6F6;

						// 类型区域
						& .types-box {
							width: 188rpx;

							& .item {
								height: 116rpx;
								line-height: 116rpx;
								text-align: center;
								font-weight: 400;
								font-size: 28rpx;
								color: #303133;

								&.active {
									font-weight: 500;
									font-size: 28rpx;
									color: #008043;
									background: #FFFFFF;
								}
							}
						}

						// 类型枚举
						& .types-content {
							padding-top: 20rpx;
							height: inherit;
							width: 562rpx;
							background: #FFFFFF;

							// 区域选择
							.region-box {
								display: flex;
								flex-wrap: wrap;

								& .item {
									display: inline-block;
									margin: 10rpx;
									width: 160rpx;
									height: 64rpx;
									line-height: 64rpx;
									font-weight: 400;
									font-size: 28rpx;
									color: #303133;
									text-align: center;

									&.active {
										font-weight: 500;
										font-size: 28rpx;
										color: #008043;
										background: #E7FFE8;
										border-radius: 200rpx;
									}
								}
							}

							// 距离选择
							.distance-box {

								& .item {
									display: flex;
									align-items: center;
									padding-left: 30rpx;
									margin-bottom: 32rpx;

									& .label {
										width: 122rpx;
										height: 64rpx;
										line-height: 64rpx;
										text-align: center;
										font-weight: 400;
										font-size: 28rpx;
										color: #303133;
									}

									&.active {
										& .label {
											font-weight: 500;
											font-size: 28rpx;
											color: #008043;
											background: #E7FFE8;
											border-radius: 200rpx;
										}

										&::v-deep .u-icon {
											margin-left: 322rpx;
											font-size: 32rpx;

											& text {
												text-transform: none;
												background: linear-gradient(180deg, #303133 0%, #21FF2B 100%);
												background-clip: text;
												-webkit-background-clip: text;
												-webkit-text-fill-color: transparent;
											}
										}

									}
								}
							}
						}
					}

					// 排序
					& .sort-box {
						padding-top: 4rpx;
						min-height: 480rpx;
						background-color: #fff;

						& .item {
							margin-top: 20rpx;
							margin-left: 48rpx;
							width: 160rpx;
							height: 64rpx;
							line-height: 63rpx;
							text-align: center;
							font-weight: 400;
							font-size: 28rpx;
							color: #303133;

							&.active {
								font-weight: 500;
								font-size: 28rpx;
								color: #008043;
								background: #E7FFE8;
								border-radius: 200rpx;
							}
						}
					}

					// 筛选
					& .screen-box {
						padding-top: 4rpx;
						margin-top: 0;
						display: flex;
						min-height: 668rpx;
						background-color: #F6F6F6;

						// 类型区域
						& .types-box {
							width: 188rpx;

							& .item {
								height: 116rpx;
								line-height: 116rpx;
								text-align: center;
								font-weight: 400;
								font-size: 28rpx;
								color: #303133;

								&.active {
									font-weight: 500;
									font-size: 28rpx;
									color: #008043;
									background: #FFFFFF;
								}
							}
						}

						// 类型枚举
						& .types-content {
							padding-top: 20rpx;
							height: inherit;
							width: 562rpx;
							background: #FFFFFF;

							// 场地设施
							.facilities-box {
								display: flex;
								flex-wrap: wrap;

								& .item {
									display: inline-block;
									margin: 10rpx;
									width: 160rpx;
									height: 64rpx;
									line-height: 64rpx;
									font-weight: 400;
									font-size: 28rpx;
									color: #303133;
									text-align: center;

									&.active {
										font-weight: 500;
										font-size: 28rpx;
										color: #008043;
										background: #E7FFE8;
										border-radius: 200rpx;
									}
								}
							}

							// 设施服务
							.service-box {
								display: flex;
								flex-wrap: wrap;

								& .item {
									display: inline-block;
									margin: 10rpx;
									width: 160rpx;
									height: 64rpx;
									line-height: 64rpx;
									font-weight: 400;
									font-size: 28rpx;
									color: #303133;
									text-align: center;

									&.active {
										font-weight: 500;
										font-size: 28rpx;
										color: #008043;
										background: #E7FFE8;
										border-radius: 200rpx;
									}
								}
							}
						}

						// 按钮
						& .btns-box {
							display: flex;
							align-items: center;
							justify-content: space-between;
							position: absolute;
							bottom: 0;
							left: 0;
							padding: 0 32rpx;
							width: 750rpx;
							height: 126rpx;
							background: #FFFFFF;

							& .btn {
								&.reset {
									width: 220rpx;
									height: 88rpx;
									border-radius: 112rpx 112rpx 112rpx 112rpx;
									border: 2rpx solid #303133;
									line-height: 88rpx;
									font-weight: 500;
									font-size: 32rpx;
									color: #303133;
									text-align: center;
									background: #FFFFFF;
								}

								&.sure {
									width: 436rpx;
									height: 88rpx;
									line-height: 88rpx;
									background: #303133;
									border-radius: 112rpx 112rpx 112rpx 112rpx;
									font-weight: 500;
									font-size: 32rpx;
									color: #FFFFFF;
									text-align: center;
								}
							}
						}
					}
				}
			}


		}

		// 内容区域
		&>.content {
			padding-top: 340rpx;

			// 场馆列表
			& .venue-list {
				// margin-top: 390rpx;
				padding: 0 32rpx;
				padding-bottom: 54rpx;

				&>.item {
					box-sizing: border-box;
					margin-top: 16rpx;
					padding: 24rpx;
					width: 686rpx;
					// height: 448rpx;
					background: #FFFFFF;
					border-radius: 24rpx 24rpx 24rpx 24rpx;

					& .top {
						display: flex;
						align-items: center;
						justify-content: space-between;

						& .logo-box {
							width: 112rpx;
							height: 112rpx;
							border-radius: 50%;
							overflow: hidden;
						}

						& .info {
							width: 508rpx;

							& .head {
								display: flex;
								align-items: center;
								justify-content: space-between;

								& .name {
									font-family: PingFang SC, PingFang SC;
									font-weight: 500;
									font-size: 28rpx;
									color: #303133;
									line-height: 33rpx;
									text-align: left;
									font-style: normal;
									text-transform: none;
								}

								& .distance-box {
									& image {
										width: 21rpx;
										height: 21rpx;
									}

									& .distance {
										font-family: PingFang SC, PingFang SC;
										font-weight: 400;
										font-size: 20rpx;
										color: #838385;
										line-height: 23rpx;
										text-align: left;
										font-style: normal;
										text-transform: none;
									}
								}
							}

							& .center {
								// display: flex;
								// align-items: center;
								// margin-top: 11rpx;

								& .rate {
									display: flex;
									align-items: center;
									margin-bottom: 10rpx;

									& text {
										margin-left: 8rpx;
										font-family: PingFang SC, PingFang SC;
										font-weight: 500;
										font-size: 28rpx;
										color: #303133;
										line-height: 33rpx;
										text-align: left;
										font-style: normal;
										text-transform: none;
									}
								}

								& .tags {
									display: flex;
									align-items: center;

									& .card {
										padding: 4rpx 12rpx;
										margin-left: 12rpx;
										font-family: PingFang SC, PingFang SC;
										font-weight: 400;
										font-size: 18rpx;
										color: #838385;
										line-height: 21rpx;
										text-align: left;
										font-style: normal;
										text-transform: none;
										background: #F5F7F6;
										border-radius: 4rpx 4rpx 4rpx 4rpx;
									}
								}
							}

							& .consumption-records {
								margin-top: 7rpx;
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								font-size: 20rpx;
								color: #838385;
								line-height: 23rpx;
								text-align: left;
								font-style: normal;
								text-transform: none;

								& .tag {
									margin-left: 8rpx;
									color: #00B608;
								}
							}
						}
					}

					& .images {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-top: 28rpx;

						& .item {
							width: 204rpx;
							height: 188rpx;
							background-color: #ccc;
							overflow: hidden;

							&:first-child {
								border-radius: 24rpx 0rpx 0rpx 24rpx;
							}

							&:last-child {
								border-radius: 0rpx 24rpx 24rpx 0rpx;
							}
						}
					}

					& .bottom {
						margin-top: 10rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						& .introduce {
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #838385;
							line-height: 28rpx;
							text-align: left;
							font-style: normal;
							text-transform: none;
						}

						& rich-text {
							width: 500rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #838385;
							line-height: 28rpx;
							text-align: left;
							font-style: normal;
							text-transform: none;
						}

						& .price-box {
							margin-top: 20rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 20rpx;
							color: #838385;
							line-height: 23rpx;
							font-style: normal;
							text-transform: none;
							text-align: right;

							& .price {
								font-family: PingFang SC, PingFang SC;
								font-weight: 500;
								font-size: 36rpx;
								line-height: 42rpx;
								text-align: left;
								font-style: normal;
								text-transform: none;
								background: linear-gradient(180deg, #303133 0%, #21FF2B 100%);
								background-clip: text;
								-webkit-background-clip: text;
								-webkit-text-fill-color: transparent;

							}
						}
					}
				}
			}
		}
	}
</style>